{% extends 'layout/manage.html' %} 
{% load static %} 
{% block css %}
<link
  rel="stylesheet"
  href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}"
/>
<style>
  .panel-default {
    margin-top: 10px;
  }

  .panel-default .panel-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .panel-body {
    padding: 0;
  }

  .title-list {
    border-right: 1px solid #dddddd;
    min-height: 500px;
  }

  .title-list ul {
    padding-left: 15px;
  }

  .title-list ul a {
    display: block;
    padding: 5px 0;
  }

  .content {
    border-left: 1px solid #dddddd;
    min-height: 600px;
    margin-left: -1px;
  }

</style>
{% endblock %} 
{% block content %}
<div class="container mt-4">
  <h2>交接记录查询</h2>
  <div>
    <!-- 时间选择 -->
    <div class="row">
      <div class="col-md-3">
        <div class="input-group">
          <span class="input-group-addon">开始时间</span>
          <input type="date" class="form-control" id="start_time" name="start_time" />
        </div>
      </div>
      <div class="col-md-3">
        <div class="input-group">
          <button id="search" class="btn btn-primary">搜 索</button>

        </div>
      </div>
    </div>
   
  </div>
  <table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>
              <select class="form-select" id="project" name="project">
              <option value="0">请选择线体</option>
              {% for project in project_list %}
              <option value="{{project}}">{{project}}</option>
              {% endfor %}
            </select>
          </th>
            <th>
              <select class="form-select" id="product" name="product">
                <option value="0">请选择机种</option>
                {% for product in product_list %}
                <option value="{{product}}">{{product}}</option>
                {% endfor %}
              </select>
            </th>
            <th>
              <select class="form-select" id="station" name="station">
                <option value="0">请选择站点</option>
                {% for name in station_list %}
                <option value="{{name}}">{{name}}</option>
                {% endfor %}
              </select>
            </th>
            <th>交接标题</th>
            <th>
              <select class="form-select" id="priority" name="priority">
                <option value="0">优先级</option>
                <option value="1">低</option>
                <option value="2">中</option>
                <option value="3">高</option>
              </select>
            </th>
            <th>处理时间</th>
            <th>
              <select class="form-select" id="deal_person" name="deal_person">
                <option value="0">处理人</option>
                {% for user in user_list %}
                <option value="{{user.id}}">{{user.username}}</option>
                {% endfor %}
              </select>
            </th>
            <th>创建日期</th>
            <th>
              <select class="form-select" id="belong_to" name="belong_to">
                <option value="0">责任单位</option>
                {% for item in belong_to_list %}
                <option value="{{item.id}}">{{item.name}}</option>
                {% endfor %}
              </select>
            </th>
            <th>
              <select class="form-select" id="station_category" name="station_category">
                <option value="0">请选择设备类型</option>
                {% for value, label in station_cato_list %}
                <option value="{{value}}">{{label}}</option>
                {% endfor %}
              </select>
            </th>
            <th>机台编号</th>
            
            
           
        </tr>
    </thead>
    <tbody>
        {% for wiki in wikis %}
        <tr>
            <td>{{ wiki.id }}</td>
            <td>{{ wiki.project.name }}</td>
            <td>{{ wiki.product.name }}</td>
            <td>{{ wiki.station.name }}</td>
            <td>
              <a href="{% url 'wiki' project_id=wiki.project %}?wiki_id={{wiki.id}}"> {{ wiki.title }} </a>
             
            </td>
            <td>{{ wiki.priority }}</td>
            <td>{{ wiki.station.belong_to }}</td>
            <td>{{ wiki.station.get_catogory_display }}</td>
            <td>{{ wiki.station.equip_no }}</td>
            <td>{{ wiki.deal_time }} min</td>
            <td>{{ wiki.deal_person }}</td>
            <td>{{ wiki.create_datetime|date:"Y-m-d H:i:s" }}</td>

        </tr>
        {% empty %}
        <tr>
            <td colspan="3" class="text-center">没有数据</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
<div >
 

<div id="results"></div>

</div>
{% endblock %}
 {% block js %}
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>

<script>
  
  // 获取 CSRF 令牌
  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        // 检查是否是我们要找的 cookie
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }
  const csrftoken = getCookie('csrftoken');

  $(function () {
    searchBtn();
  });
  function searchBtn() {
    $("#search").click(function () {
      var start_time = $("#start_time").val();
      // 验证 start_time 是否为空
      if (!start_time) {
        alert('请选择开始时间');
        return;
      }
      $.ajax({
        url: "{% url 'search_wiki' %}",
        type: "POST",
        dataType: "json",
        traditional: true,
        headers: {
          "X-CSRFToken": csrftoken,
          "Content-Type": "application/json",
        },
        data: JSON.stringify({
          'start_time': start_time,
        }),
        success: function (res) {
          if (res.status) {
          //  将返回的数据res.wiki_list渲染到页面,
          // 将tbody清空，然后遍历res.wiki_list，将每个元素渲染到tbody中
          console.log(res.wiki_list);
          var tbody = document.querySelector('table.table-striped tbody');
            if (!tbody) {
              console.error('tbody element not found');
              return;
            }
          tbody.innerHTML = "";
          res.wiki_list.forEach(function (wiki) {
                    // 创建一个新的 tr 元素
          var tr = document.createElement('tr');
          
          // 创建 td 元素并填充数据
          var idTd = document.createElement('td');
          idTd.textContent = wiki.id;
          tr.appendChild(idTd);
          
          var projectTd = document.createElement('td');
          projectTd.textContent = wiki.project.name;
          tr.appendChild(projectTd);
          
          var productTd = document.createElement('td');
          productTd.textContent = wiki.product.name;
          tr.appendChild(productTd);
          
          var stationTd = document.createElement('td');
          stationTd.textContent = wiki.station.name;
          tr.appendChild(stationTd);
          
          var titleTd = document.createElement('td');
          var titleLink = document.createElement('a');
          titleLink.href = wiki.url;
          titleLink.textContent = wiki.title;
          titleTd.appendChild(titleLink);
          tr.appendChild(titleTd);
          
          var priorityTd = document.createElement('td');
          priorityTd.textContent = wiki.priority;
          tr.appendChild(priorityTd);
          
          var dealTimeTd = document.createElement('td');
          dealTimeTd.textContent = wiki.deal_time+" min";
          tr.appendChild(dealTimeTd);
          
          var dealPersonTd = document.createElement('td');
          dealPersonTd.textContent = wiki.deal_person.username;
          tr.appendChild(dealPersonTd);
          
          var createDatetimeTd = document.createElement('td');
          createDatetimeTd.textContent = wiki.create_datetime;
          tr.appendChild(createDatetimeTd);
          
          var stationBelongToTd = document.createElement('td');
          stationBelongToTd.textContent = wiki.station.belong_to.name;
          tr.appendChild(stationBelongToTd);

          var stationCatogoryTd = document.createElement('td');
          stationCatogoryTd.textContent = wiki.station.catogory_display;
          tr.appendChild(stationCatogoryTd);

          var stationEquipNoTd = document.createElement('td');
          stationEquipNoTd.textContent = wiki.station.equip_no;
          tr.appendChild(stationEquipNoTd);
          // 将 tr 元素添加到 tbody 中
          tbody.appendChild(tr);

          });

          } else {
            alert(res.error);
          }
        },
       
      });

    });

  }
</script>

{% endblock %}
